Step 1 - Create a material for the blur effect

In this step you create a material which provides the Gaussian blur effect.

Assets for the tutorial

The starting point of this tutorial is the Blur.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Blur/Start directory.

The <KanziWorkspace>/Tutorials/Blur/Completed directory contains the completed Kanzi Studio project of this tutorial.

Create a material for the blur effect

In this section you first create a material type which supports the directional Gaussian blur effect, then you create a material you can use to apply the effect to 3D content.

To create a material for the blur effect:

1. In Kanzi Studio open the project stored in the <KanziWorkspace>/Tutorials/Blur/Start directory.
   
2. In the Library > Materials and Textures press Alt and right-click Material Types, and select DefaultBlit.
   
3. In the Library > Materials and Textures > Material Types select the DefaultBlit material type, press the F2 key, and rename the material type to DirectionalBlur.
   
4. In the Library > Materials and Textures > Material Types > DirectionalBlur material type double-click the Fragment Shader to open it in the Shader Source Editor.
   
5. In the Shader Source Editor replace the content of the fragment shader file with the shader code in this step, and click Save.
   This fragment shader implements the directional Gaussian blur.

   precision mediump float;
   
   uniform sampler2D Texture0;
   uniform lowp float BlendIntensity;
   
   uniform mediump float kzTextureWidth0;
   uniform mediump float kzTextureHeight0;
   
   // Defines the direction (x or y axis) along which to apply the blur.
   uniform lowp vec2 BlurDirection;
   // Determines the strength of the blur.
   uniform mediump float BlurRadius;
   
   // Defines the texture coordinate attribute passed from the vertex shader.
   varying vec2 vTexCoord;
   
   vec4 gaussianBlur(mediump vec2 coord, lowp vec2 dir)
   {
       // Defines the one-dimensional Gaussian Kernel with 9 samples.
       float GAUSSIAN_KERNEL[9];
       GAUSSIAN_KERNEL[0] = 0.028532;
       GAUSSIAN_KERNEL[1] = 0.067234;
       GAUSSIAN_KERNEL[2] = 0.124009;
       GAUSSIAN_KERNEL[3] = 0.179044;
       GAUSSIAN_KERNEL[4] = 0.20236;
       GAUSSIAN_KERNEL[5] = 0.179044;
       GAUSSIAN_KERNEL[6] = 0.124009;
       GAUSSIAN_KERNEL[7] = 0.067234;
       GAUSSIAN_KERNEL[8] = 0.028532;
   
       vec2 texel = vec2(1.0/kzTextureWidth0, 1.0/kzTextureHeight0);
       vec4 sum = vec4(0.0);
       // Get the original texture coordinate for this fragment.
       vec2 tc = coord;
       // Get the amount to blur.
       float blur = BlurRadius;
       // Set the amount of blur in the horizontal direction.
       float hstep = dir.x*texel.x;
       // Set the amount of blur in the vertical direction.
       float vstep = dir.y*texel.y;
   
       // Sample the texture 9 times for every fragment.
       for(int i = 0; i < 9; i++)
       {
           float pixelOffset = (float(i) - floor(9.0 * 0.5));
           mediump vec2 coord = vec2(tc.x + pixelOffset * blur * hstep, tc.y + pixelOffset * blur * vstep);
           sum += texture2D(Texture0, coord) * GAUSSIAN_KERNEL[i];
       }
   
       return sum;
   }
   
   void main()
   {
       gl_FragColor = gaussianBlur(vTexCoord, BlurDirection) * BlendIntensity; 
   }

6. In the Library > Materials and Textures > Material Types select the DirectionalBlur material type and in the Properties click Sync with Uniforms to create and add the properties you defined in the shaders to this material type and the materials that use it.
   
7. In the Create Property Type dialog click Yes to create the custom property type BlurDirection and in the Property Type Editor window set:
   • Display Name to Blur Direction
   • Editor to 2D vector slider editor
   • Upper Bound property fields X and Y to 1
   Click Save.
   You use this property type to set the direction in which a render pass applies the blur effect.
   
8. In the Create Property Type dialog click Yes to create the custom property type BlurRadius and in the Property Type Editor window set:
   • Display Name to Blur Radius
   • Upper Bound to 5
   • Default Value to 1
   Click Save.
   You use this property type to set the strength of the blur effect.
   
9. In the Library > Materials and Textures > Material Types > DirectionalBlur select the DefaultBlitMaterial material, press the F2 key, and rename the material to DirectionalBlurMaterial.
   In the next step you use this material to apply the Gaussian blur effect to the model of the car in the project.
   

See also

To learn more about materials and material types, see Material types and materials.

To learn more about shaders, see Shaders.

Open topic with navigation